<template>
	<view class="heir-container">
		<view class="info-box">
			<view class="title">继承人信息</view>
			<view>
				<view class="item">
					<view class="label">姓名：</view>
					<input v-model="formData.name" placeholder="请输入" />
				</view>
				<view class="item">
					<view class="label">性别：</view>
					<view class="item-radio">
						<radio-group>
							<label v-for="item in radioGroup" :key="item" class="it-radio">
								<radio :value="item" :checked="item==activeRadio" />{{item}}
							</label>
						</radio-group>
					</view>
				</view>
				<view class="item">
					<view class="label">出生日期：</view>
					<picker mode="date" @change="bindDateChange">
						<view>{{formData.birthDate || '请选择'}}</view>
					</picker>
				</view>
				<view class="item">
					<view class="label">民族：</view>
					<picker title="选择您的民族" :range="familydata" :value='index' @change="bindFamilyChange">
						<view>{{formData.nameFamily || '请选择'}}</view>
					</picker>
				</view>
				<view class="item">
					<view class="label">文化程度：</view>
					<picker title="选择您的文化程度" @change="bindCultureChange" :range="culturedata" :value='index'>
						<view class="picker">
							<input type="text" disabled="true" placeholder="请选择 >" :value="culture" />
						</view>
					</picker>
				</view>
				<view class="item">
					<view class="label">职业：</view>
					<input v-model="formData.occupation" placeholder="请输入" />
				</view>
				<view class="item">
					<view class="label">国籍：</view>
					<picker :range="countrydata" title="选择您所在的国籍" :value='nationalityIndex' @change="bindCountryChange">
						<view class="picker">
							<input type="text" disabled="true" placeholder="请选择 >" :value="country" />
						</view>
					</picker>
				</view>
				<view class="item">
					<view class="label">住址：</view>
					<picker mode="multiSelector" title="选择省/市/区" :range="multiArray" :value='index'
						@change="bindMultiChange">
						<view class="picker">
							<input type="text" disabled="true" placeholder="省/市/区（县） >" :value="multi" />
						</view>
					</picker>
				</view>
				<view class="item">
					<view class="label">详细地址（选填）：</view>
					<input placeholder="请输入" />
				</view>
				<view class="item">
					<view class="label">身份证号：</view>
					<input v-model="formData.idNumber" placeholder="请输入" />
				</view>
				<view class="item">
					<view class="label">联系手机号：</view>
					<input v-model="formData.phone" placeholder="请输入" />
				</view>
				<view class="item">
					<view class="label">已遗嘱人关系：</view>
					<picker @change="bindPickerChange" :value="index" :range="array">
						<view>{{formData.relationship || '请选择'}}</view>
					</picker>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeRadio: '男',
				radioGroup: ['男', '女'],
				familydata: ['汉族', '满族', '蒙古族', '回族', '苗族', '傣族', '黎族'],
				countrydata: ['中国', '美国', '英国', '加拿大', '日本', '法国'],
				multiArray: [
					['湖南省', '测试数据', '测试数据', '测试数据', '测试数据'],
					['长沙市', '测试数据', '测试数据', '测试数据', '测试数据'],
					['岳麓区', '测试数据', '测试数据', '测试数据', '测试数据']
				],
				array: ['本人', '母子', '母女', '亲戚', '朋友'],
				index: '',
				formData: {
					name: '',
					occupation: '',
					idNumber: '',
					nationality: '',
					relationship: '',
					birthDate: '',
					nameFamily: ''
				}
			};
		},
		methods: {
			bindPickerChange: function(e) {
				this.index = e.detail.value
				this.formData.relationship = this.array[e.detail.value]
			},

			bindMultiChange(e) {
				// this.formData.nationality = this.countrydata[]
			},

			bindDateChange(e) { //选择出生日期
				this.formData.birthDate = e.detail.value
			},

			bindFamilyChange(e) {
				this.formData.nameFamily = this.familydata[e.detail.value]
			}
		}
	}
</script>

<style lang="scss">
	.heir-container {
		line-height: 1;

		.info-box {
			background-color: #fff;
			border-radius: 20px;
			padding: 0 30rpx;
			margin-top: 20rpx;
			overflow: hidden;

			.title {
				margin-top: 30rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				border-bottom: 1rpx solid #F6F6F6;
				padding-bottom: 20rpx;
			}

			.item {
				height: 70rpx;
				line-height: 50rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				float: left;

				input {
					float: left;
					font-size: 26rpx;
				}

				.label {
					width: 500rpx;
				}

				input {
					text-align: right;
					width: 100%,
				}

				.item-radio {


					/deep/uni-radio .uni-radio-input {
						width: 26rpx !important;
						height: 26rpx !important;
					}

					/deep/.uni-radio-input-checked {
						background: #FFFFFF !important;
						border: 1px solid #53B3D9 !important;
					}

					/deep/uni-radio .uni-radio-input.uni-radio-input-checked:before {
						color: #53B3D9 !important;
					}
				}
			}
		}
	}
</style>
